<script lang="ts">
import type { TReward } from './ClaimSuccess.vue';
import { useThrottleFn } from '@peng_kai/kit/libs/vueuse';

export const claimPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./Claim.vue')),
  { wrapClassName: 'ant-cover__Modal-drawer [--modal-height:fit-content]', centered: true, footer: null },
);
</script>

<script setup lang="ts">
const props = defineProps<{
  claimType: number;
  currency?: TReward[];
  amount?: number;
  invalidateApiKey?: string[]; // 使数据失效的apikey
}>();
const emits = defineEmits<{
  close: [];
}>();

const claimMut = useMutation({
  mutationKey: [apis.apiInviteBonusesClaim.id],
  mutationFn: apis.apiInviteBonusesClaim,
  onSuccess() {
    globalPopups.claimSuccess.open({ reward: props.currency }).then(() => emits('close'));
    [
      apis.apiUserBalance.id,
      apis.apiCurrencyIndex.id,
      apis.apiActivityCheckAvailableBonuses.id,
      apis.apiUserBalance.id,
      apis.apiInviteStatistics.id,
      apis.apiInviteRewardsHistory.id,
      apis.apiUserBalance.id,
    ].forEach((k) => {
      queryClient.invalidateQueries({
        queryKey: [k],
        exact: false,
      });
    });
  },
});

const claim = useThrottleFn(() => {
  claimMut.mutate({ requestBody: { type: props.claimType } });
}, 1000);
</script>

<template>
  <div class="mt-10 text-sm text-sys-text-body">
    <div class="mb-1 text-center text-base">
      {{ $t('bsiStBv8su441oiO_6yYr') }}
    </div>
    <div class="text-center text-2xl text-sys-text-head">
      <TAmount :value="props.amount" symbol="$" iconPos="left" :decimals="2" format="max-dec" />
    </div>

    <div class="divider-h-gradual my-4" />

    <div class="text-center">
      {{ $t('uz0cjrPx86r38I4NTixZk') }}
    </div>

    <div class="grid mt-4 max-h-30 gap-2 overflow-y-scroll rounded-2 mobile:grid-cols-2">
      <div v-for="item in props.currency" :key="item.symbol ?? item?.currency" class="flex items-center gap-1 text-sm bg-sys-layer-a rounded-lg p-2">
        <TAmount class="text-sys-text-head" :value="item.amount ?? bignumber(Number(item?.balance))" :symbol="item.symbol ?? item?.currency" iconPos="left" colored="full" />
        <span>{{ item.symbol }}</span>
      </div>
    </div>

    <AButton
      class="ant-cover__Button-3d-primary mt-5"
      type="primary" block
      :disabled="claimMut.isPending.value" :loading="claimMut.isPending.value"
      @click="claim()"
    >
      {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
    </AButton>
  </div>
</template>
